<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校园二手市场 - 我的收藏</title>
  <style>
    :root {
      --primary-color: #4CAF50;
      --secondary-color: #66BB6A;
      --light-gray: #F5F5F5;
      --text-color: #212121;
      --sub-text: #757575;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    body {
      line-height: 1.6;
      color: var(--text-color);
      background-color: var(--light-gray);
      min-height: 100vh;
      padding-bottom: 60px;
      position: relative;
    }

    .header {
      background-color: var(--primary-color);
      color: white;
      padding: 1rem;
      text-align: center;
    }

    .content {
      flex: 1;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem;
    }

    .product-list {
      background-color: #fff;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .product-card {
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      padding: 1rem;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .product-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .product-card img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 0.5rem;
    }

    .product-card h3 {
      margin-bottom: 0.5rem;
      font-size: 1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .product-card p {
      color: var(--sub-text);
      margin-bottom: 0.5rem;
      font-size: 0.8rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .product-card .price {
      font-weight: bold;
      color: #e74c3c;
      font-size: 1.1rem;
    }

    .product-card .date {
      font-size: 0.7rem;
      color: #95a5a6;
      margin-top: 0.3rem;
    }

    .nav-bar {
      display: flex;
      justify-content: space-around;
      background-color: #fff;
      padding: 0.5rem;
      position: fixed;
      bottom: 0;
      width: 100%;
      margin: 0 auto;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
      border-radius: 12px 12px 0 0;
      z-index: 102;
    }

    .nav-bar a {
      color: var(--sub-text);
      text-decoration: none;
      padding: 0.5rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.8rem;
      transition: color 0.3s;
      position: relative;
    }

    .nav-bar a.active {
      color: var(--primary-color);
    }

    .nav-bar a.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 3px;
      background-color: var(--primary-color);
      border-radius: 3px;
    }

    .nav-icon {
      width: 24px;
      height: 24px;
      position: relative;
      margin-bottom: 0.2rem;
    }

    .home-icon::before {
      content: "🏠";
    }

    .products-icon::before {
      content: "📦";
    }

    .publish-icon::before {
      content: "✏️";
    }

    .news-icon::before {
      content: "💬";
    }

    .account-icon::before {
      content: "👤";
    }

    .empty-favorites {
      text-align: center;
      padding: 2rem;
      color: var(--sub-text);
    }

    .empty-favorites-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
  </style>
</head>

<body>
  <header class="header">
    <h1>校园二手市场</h1>
  </header>

  <div class="content">
    <main class="container">
      <section class="product-list">
        <h2>我的收藏</h2>
        <div id="favorites-list" class="product-grid">
          <!-- 收藏商品将通过JavaScript动态加载 -->
        </div>
      </section>
    </main>
  </div>

  <nav class="nav-bar">
    <a href="index.html">
      <div class="nav-icon home-icon"></div>
      首页
    </a>
    <a href="products.html">
      <div class="nav-icon products-icon"></div>
      商品
    </a>
    <a href="publish.html">
      <div class="nav-icon publish-icon"></div>
      发布
    </a>
    <a href="news.html">
      <div class="nav-icon news-icon"></div>
      消息
    </a>
    <a href="account.html" class="active">
      <div class="nav-icon account-icon"></div>
      我的
    </a>
  </nav>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const currentUser = JSON.parse(localStorage.getItem('currentUser'));
      if (!currentUser) {
        window.location.href = 'login.html';
      }

      const favoritesList = document.getElementById('favorites-list');

      // 从 localStorage 获取商品数据
      function getProducts() {
        let products = JSON.parse(localStorage.getItem('products'));
        if (!products || products.length === 0) {
          // 使用默认数据初始化
          products = [
            { id: 1, title: '全新未拆封考研英语真题', description: '全新未拆封2023考研英语真题详解，包含近10年真题及详细解析。', price: 35, image: '图片/全新未拆封考研英语真题.jpg', category: 'books', date: '2023-05-10', userId: 1, userName: '张同学' },
            { id: 2, title: '九成新自行车', description: '九成新自行车，适合校园内使用。', price: 150, image: '图片/自行车.jpg', category: 'transportation', date: '2023-05-12', userId: 2, userName: '李同学' },
            { id: 3, title: '电子书阅读器', description: '电子书阅读器，几乎全新，附带保护套。', price: 200, image: '图片/电子阅读器.jpg', category: 'electronics', date: '2023-05-15', userId: 3, userName: '王同学' },
            { id: 4, title: '宿舍用小冰箱', description: '宿舍用小冰箱，功能正常，适合存放饮料和零食。', price: 100, image: '图片/宿舍小冰箱.jpg', category: 'appliances', date: '2023-05-18', userId: 1, userName: '张同学' },
            { id: 5, title: '宿舍用台灯', description: '宿舍用台灯，可调节亮度。', price: 30, image: '图片/宿舍用台灯.jpg', category: 'living', date: '2023-05-20', userId: 4, userName: '赵同学' },
            { id: 6, title: '无线耳机', description: '无线蓝牙耳机，音质清晰，适合学习和娱乐。', price: 120, image: '图片/无线耳机.jpg', category: 'electronics', date: '2023-05-22', userId: 2, userName: '李同学' },
            { id: 7, title: '折叠桌椅', description: '便携式折叠桌椅，适合户外活动和宿舍使用。', price: 80, image: '图片/折叠桌椅.jpg', category: 'living', date: '2023-05-25', userId: 5, userName: '刘同学' },
            { id: 8, title: '背包', description: '多功能背包，适合日常使用和旅行。', price: 60, image: '图片/背包.jpg', category: 'living', date: '2023-05-28', userId: 3, userName: '王同学' },
            { id: 9, title: '篮球', description: '标准篮球，适合校园篮球比赛和训练。', price: 45, image: '图片/篮球.jpg', category: 'transportation', date: '2023-06-01', userId: 4, userName: '赵同学' },
            { id: 10, title: '笔记本电脑', description: '高性能笔记本电脑，适合学习和编程。', price: 2500, image: '图片/笔记本电脑.jpg', category: 'electronics', date: '2023-06-03', userId: 1, userName: '张同学' },
            { id: 11, title: '智能手表', description: '智能手表，支持健康监测和通知提醒。', price: 180, image: '图片/智能手表.jpg', category: 'electronics', date: '2023-06-05', userId: 5, userName: '刘同学' },
            { id: 12, title: '滑板', description: '初学者滑板，适合校园内短途出行。', price: 90, image: '图片/滑板.jpg', category: 'transportation', date: '2023-06-08', userId: 2, userName: '李同学' },
            { id: 13, title: '水壶', description: '不锈钢水壶，保温效果好，适合日常使用。', price: 25, image: '图片/水壶.jpg', category: 'living', date: '2023-06-10', userId: 3, userName: '王同学' },
            { id: 14, title: '绘画工具', description: '专业绘画工具，适合艺术学习和创作。', price: 75, image: '图片/绘画工具.jpg', category: 'books', date: '2023-06-12', userId: 4, userName: '赵同学' },
            { id: 15, title: '耳机支架', description: '耳机支架，帮助整理桌面空间。', price: 15, image: '图片/耳机支架.jpg', category: 'living', date: '2023-06-15', userId: 5, userName: '刘同学' }
          ];
          localStorage.setItem('products', JSON.stringify(products));
        }
        return products;
      }

      // 格式化日期显示
      function formatDate(dateString) {
        const date = new Date(dateString);
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
      }

      // 渲染收藏商品列表
      function renderFavorites() {
        const products = getProducts();
        const favorites = JSON.parse(localStorage.getItem('favorites')) || [];

        favoritesList.innerHTML = '';

        if (favorites.length === 0) {
          favoritesList.innerHTML = `
                    <div class="empty-favorites">
                        <div class="empty-favorites-icon">⭐</div>
                        <h3>您还没有收藏任何商品</h3>
                        <p>快去浏览商品，收藏您喜欢的物品吧！</p>
                    </div>
                `;
          return;
        }

        // 获取所有收藏的商品
        const favoriteProducts = products.filter(product => favorites.includes(product.id));

        // 按日期降序排序，最新的排在最前面
        favoriteProducts.sort((a, b) => new Date(b.date) - new Date(a.date));

        favoriteProducts.forEach(product => {
          const productCard = document.createElement('div');
          productCard.className = 'product-card';

          // 计算发布时间距离现在的时间
          const today = new Date();
          const productDate = new Date(product.date);
          const diffInHours = Math.floor((today - productDate) / (1000 * 60 * 60));

          productCard.innerHTML = `
                    <img src="${product.image}" alt="${product.title}">
                    <h3>${product.title}</h3>
                    <p>${product.description}</p>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span class="price">¥${product.price}</span>
                        ${diffInHours <= 24 ? '<span class="new-badge">新</span>' : ''}
                    </div>
                    <p class="date">发布于: ${formatDate(product.date)}</p>
                `;
          productCard.addEventListener('click', function () {
            window.location.href = `product-detail.html?id=${product.id}`;
          });
          favoritesList.appendChild(productCard);
        });
      }

      // 初始化收藏列表
      renderFavorites();
    });
  </script>
</body>

</html>